
<div  id="result" style=" overflow: auto;">
<!-- here append all ajax results for testing -->
</div>
<div style='width:1200px; margin-left:auto; margin-right:auto; margin-top:50px;'>
	<div   style="float:left;overflow: auto;  width:100%;">
	<!-- <h2>Stack Tracer</h2> -->
	
	<input style='display:none' id='refeshGame' type='button' value='Refresh Game' class='btn btn-info'>
	<input id='newGame' type='button' value='New Game' class='btn btn-warning'>
	<input id='endGame' type='button' value='End Game' class='btn btn-danger'>
	<div class='progress progress-striped active' style='width:100px; display:none;'>
	<div class="progress-bar progress-bar-primary" style="width:100.0%;">
		<span class='sr-only'>100%</span>
	</div>
	<div class="progress-bar progress-bar-primary" style="width:0.0%;">
		<span class='sr-only'>0.0%</span>
	</div>
	</div>
	
	<table style='display:none;' id="tracer" class="table table-hover">
		<tr>
			<th>Event Description</th>
			<th>Triggered</th>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
		
	</table>
	</div>
	<style> 
		.rotate_
		{
		/* Rotate div */
		transform:rotate(90deg);
		-ms-transform:rotate(90deg); /* IE 9 */
		-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
		position:relative;
		margin-left:60px;
		}
		.rotate_:hover{
			transform:rotate(50deg);
			-ms-transform:rotate(50deg); /* IE 9 */
			-webkit-transform:rotate(50deg);
			-moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;
		}
		#playerOneCards img:hover{
			margin-left:10px;
			transform:rotate(5deg);
			-moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;
		}
		#playerTwoCards img:hover{
			margin-left:10px;
			transform:rotate(5deg);
			-moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;
		}
	</style>
	<div  style="float:left; overflow: auto; min-height:400px; height:100%; width:250px;">
		<h3>Deck Cards Table</h3>
		<br/><br/><br/>
		<img  class='rotate_' id='masterSuit' src='<?php echo base_url();?>res/images/durakCards/noMasterSuit.jpg' height='150' width='100'/>
		<img style='position:relative;margin-left:-160px;' src='<?php echo base_url();?>res/images/durakCards/back.jpg' height='160' width='110'/>
		<h3>Game Information</h3>
		<div id='gameInfo'>
		
		
			<table class="table table-hover">
				<tr>
					<td>Master Suit:</td>
					<td id='masterSuitInfo'>?</td>
				</tr>
				<tr>
					<td>Durak Player:</td>
					<td id='whosDurak'>?</td>
				</tr>
				<tr>
					<td>Attacker:</td>
					<td id='attackerInfo'>?</td>
				</tr>
				<tr>
					<td>Defender:</td>
					<td id='defenderInfo'>?</td>
				</tr>
				<tr>
					<td>Turn:</td>
					<td id='turnInfo'>?</td>
				</tr>
				<tr>
					<td>Remaining Cards on Deck:</td>
					<td id='remainingCardsInfo'>?</td>
				</tr>
			</table>
		</div>
	</div>
	<div   style=" display:none;float:left;overflow: auto; min-height:400px; height:100%; width:200px;">
	<h3>Talon Card Table</h3>
	<div id="talonCards" class="table table-hover">
		
	</div>
	</div>
	
	<div  style="float:left; overflow: auto; height:100%; width:350px;">
	<h3>Player One Card Table</h3>
	<input style='display:none' id='drawCardp1' type='button' value='Draw Card' class='btn btn-info'>
	<input id='endAttackp1' type='button' value='End Attack' class='btn btn-warning' >
	<input id='acceptCardsp1' type='button' value='Accept Cards' class='btn btn-warning' onClick="game.players[0].acceptCards()">
	<input id='attackToBecomeAttackFromDefender1' type='button' value='Attack' class='btn btn-warning' onClick="game.players[0].attackToBecomeAttackFromDefender()">
	<input id='reloadSortedPlayerCards1' type='button' value='Sort Cards' class='btn btn-warning' onClick="table.reloadSortedPlayerCards(0)">
	
	
	<div id="playerOneCards"  class="table table-hover">
		
	
	</div>
	</div>
	<div  style="float:left; overflow: auto; height:100%; width:350px;">
	<h3>Player Two Card Table</h3>
	
	<input  style='display:none' id='drawCardp2' type='button' value='Draw Card' class='btn btn-info'>
	<input id='endAttackp2' type='button' value='End Attack' class='btn btn-warning' >
	<input id='acceptCardsp2' type='button' value='Accept Cards' class='btn btn-warning' onClick="game.players[1].acceptCards()">
	<input id='attackToBecomeAttackFromDefender2' type='button' value='Attack' class='btn btn-warning' onClick="game.players[1].attackToBecomeAttackFromDefender()">
	<input id='reloadSortedPlayerCards2' type='button' value='Sort Cards' class='btn btn-warning' onClick="table.reloadSortedPlayerCards(1)">
	
	<div id="playerTwoCards"  class="table table-hover">
		
	
	</div>
	</div>
	<div  style="float:left; overflow: auto; min-height:400px; height:100%; width:250px;">
	<h3>Revealed Card Table</h3>
	<div id="revealedCards"  class="table table-hover">
		
	
	</div>
	
	</div>
</div>